<template>
	<view>
		<view class="top-block">
			<view class="top-title">待收货</view>
		</view>
		<view class="address">

		</view>
		<view class="block1">
			<view class="order-con" @click="runDetail()">
				<image src="../../../static/logo.png" mode=""></image>
				<view>
					<view class="title">商品名称商品名称商品名称商品名称商品名称商品</view>
					<view class="space"><text>规格</text><text>所属分销:艳艳</text></view>
					<view class="des">
						<view>团购金额:<text>￥39元</text></view>
						<view>X1</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block1" style="margin-bottom:200rpx;">
			<view class="block-con">
				<view>
					<text>订单编号</text>
					<text>MJ123456789123456789</text>
				</view>
				<view>
					<text>售后订单</text>
					<text>SH123456789123456789</text>
				</view>
				<view>
					<text>申请时间</text>
					<text>2023-07-17 09:30</text>
				</view>
				<view>
					<text>售后类型</text>
					<text>退货退款</text>
				</view>
				<view>
					<text>退款金额</text>
					<text>￥100.00</text>
				</view>
				<view>
					<text>收货状态</text>
					<text>已收到货</text>
				</view>
				<view>
					<text>申请原因</text>
					<text>物品与描述不符</text>
				</view>
				<view>
					<text>申请说明</text>
					<text>内容内容内容内容</text>
				</view>
				<view>
					<text>联系电话</text>
					<text>12345678910</text>
				</view>
				<view>
					<text>售后凭证</text>
				</view>
				<view class="imgBlock">
					<image src="../../../static/logo.png" mode=""></image>
					<image src="../../../static/logo.png" mode=""></image>
					<image src="../../../static/logo.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="btm-fixed">
			<view class="order-btm">
				<view class="btn" v-show="current==3">再次购买</view>
				<view class="btn" v-show="current==1" @click="cancel()">取消</view>

				<view class="btn" v-show="current==2">确认收货</view>
				<view class="btn" v-show="current==3">去评价</view>
				<view class="btn" v-show="current==4">我已退货</view>
				<view class="btn" v-show="current==4">退货详情</view>
				<view class="btn" v-show="current==4">再次申请</view>
				<view class="btn2" v-show="current==1">申请退款</view>
				<view class="btn2" v-show="current==1 || current==2 || current==3">分享</view>
				<view class="btn2" v-show="current==2">查看物流</view>
				<view class="btn2" v-show="current==2 || current==3">申请售后</view>
				<view class="btn2" v-show="current==3 || current==4">删除订单</view>
				<view class="btn2" v-show="current==4">撤销售后</view>

			</view>
		</view>
		<u-popup :show="showpopup" closeOnClickOverlay mode="center" round="8">

			<view class="pop-con">
				确定取消订单吗?
			</view>
			<view class="btn-block">
				<view class="pop-fou" @click="no()">
					取消
				</view>
				<view class="pop-btn" @click="yes()">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				showpopup: false
			}
		},
		onLoad(option) {
			console.log(option.current)
			this.current = option.current
		},
		methods: {
			cancel() {
				this.showpopup = true
			},
			yes() {
				this.showpopup = false
			},
			no() {
				this.showpopup = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.top-block {
		width: 682rpx;
		height: auto;
		margin: 0 auto;
		margin-top: 32rpx;

		.top-title {
			font-size: 38rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
		}

		.top-con {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			margin-top: 10rpx;
		}
	}

	.block1 {
		width: 682rpx;
		height: auto;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 32rpx;
			padding: 20rpx;
		}
	}

	.order-con {
		padding: 0 20rpx;
		display: flex;

		image {
			width: 180rpx;
			height: 180rpx;
			margin: 20rpx 10rpx 20rpx 0;
		}

		view {
			width: 450rpx;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 42rpx;
				margin-top: 0rpx;
			}

			.space {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #777777;
				line-height: 38rpx;
				display: flex;
				justify-content: space-between;
			}

			.des {
				font-size: 26rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 50rpx;
				display: flex;
				justify-content: space-between;

				text {
					color: #E21818;
				}

				view:last-child {

					font-weight: 500;
					color: #999999;
					text-align: right;
				}
			}
		}
	}

	.block-con {
		width: 642rpx;
		height: auto;
		margin: 0 auto;
		padding-bottom: 20rpx;

		view {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			margin-bottom: 20rpx;
		}
	}

	.imgBlock {
		display: flex;
		justify-content: flex-start !important;
		flex-wrap: wrap;

		image {
			width: 190rpx;
			height: 200rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}

	.btm-fixed {
		width: 100%;
		height: 94rpx;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.order-btm {
		padding: 10rpx 20rpx 17rpx 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;

		display: flex;
		flex-direction: row-reverse;

		.btn {
			width: 170rpx;
			height: 68rpx;
			border-radius: 50rpx;
			line-height: 68rpx;
			background: linear-gradient(to bottom, #F9773A, #FF3B06);
			text-align: center;
			color: #FFFFFF;
			margin-left: 10rpx;
		}

		.btn2 {
			width: 168rpx;
			height: 66rpx;
			border-radius: 50rpx;
			line-height: 68rpx;
			border: #AAAAAA solid 1px;
			text-align: center;
			color: #333333;
			margin-left: 10rpx;
		}
	}

	.pop-title {
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 45rpx;
		margin-top: 43rpx;
	}

	.pop-con {
		width: 390rpx;
		padding: 0 129rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 60rpx;
		margin-top: 22rpx;
	}

	.btn-block {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.pop-btn {
		width: 280rpx;
		height: 90rpx;
		background: linear-gradient(to bottom, #F9773A, #FF3B06);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		opacity: 1;
		margin: 47rpx auto;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 90rpx;
	}

	.pop-fou {
		width: 280rpx;
		height: 90rpx;
		background: #f9a94d;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 90rpx;
		margin: 47rpx auto;
		text-align: center;
	}

	.address {}
</style>